<template>
  <div>
    <div class="masking_box">
      <div class="servicepro">
        <div v-for="(item, index) in masking" :key="index">
          <div class="masking-sort" v-if="index % 2 === 0">
            <div class="masking-sort-name">{{ item.title }}</div>
            <div class="masking-sort-title">{{ item.content }}</div>

            <div class="masking-sort-line">
              <div class="sort-li">
                {{ item.sort }}
              </div>
            </div>
          </div>
          <div class="masking-sort top2" v-else>
            <div class="masking-sort-line">
              <div class="sort-li">
                {{ item.sort }}
              </div>
            </div>
            <div class="masking-sort-name">{{ item.title }}</div>
            <div class="masking-sort-title">{{ item.content }}</div>
          </div>
        </div>
        <div class="row-line"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import serviceApi from "@/api/modules/lawyer.js"
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
const masking = reactive([
  // {
  //   title: "专属顾问咨询",
  //   sotr: "01",
  // },
  // {
  //   title: "提交订单",
  //   sotr: "02",
  // },
  // {
  //   title: "签订代理协议",
  //   sotr: "03",
  // },
  // {
  //   title: "匹配专业律师出具意见",
  //   sotr: "04",
  // },
  // {
  //   title: "准备材料，提交立案",
  //   sotr: "05",
  // },
  // {
  //   title: "法院受理",
  //   sotr: "06",
  // },
  // {
  //   title: "开庭审理",
  //   sotr: "07",
  // },
  // {
  //   title: "裁判结案",
  //   sotr: "08",
  // },
]);
const service_id = ref(1)
const getServiceProcess = async () => {
  let res = await serviceApi.getServiceProcess(service_id.value)
  if (res.code === 1) {
    let newArr = Object.values(res.data)
    masking.push(...newArr)
  }
  // console.log(masking);
}
onMounted(() => {
  getServiceProcess()
})
</script>

<style lang="scss" scoped>
.servicepro-main {

  // display: flex;
  // justify-content: center;
  // // align-items: center;
  // flex-direction: column;
  .masking_title_box {
    width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    .masking_title {
      // width: 100%;

      // align-items: center;
      // margin: 0 auto;
      margin: 30px 0 20px 0;
      // width: 112px;
      height: 50px;
      font-size: 28px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: Medium;
      text-align: center;
      color: #202020;
      line-height: 50px;
    }
  }

  .masking_box {
    .servicepro {
      display: flex;
      justify-content: center;
      // height: 100%;
      align-items: center;
      // margin-top: 30px;
      position: relative;

      .row-line {
        position: absolute;
        height: 1px;
        background: #d3d8e3;
        width: 60%;
        left: 50%;
        top: 63%;
        z-index: 1;
        transform: translate(-50%, -50%);
      }

      .top2 {
        margin-top: 125px;
      }

      .masking-sort {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;

        .masking-sort-name {
          z-index: 2;
          width: 150px;
          height: 24px;
          font-size: 16px;
          font-family: PingFang SC, PingFang SC-Semibold;
          font-weight: Semibold;
          text-align: center;
          color: #181818;
          line-height: 24px;
        }

        .masking-sort-title {
          z-index: 2;
          width: 150px;
          height: 40px;
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: Regular;
          text-align: center;
          color: #5e5f60;
          line-height: 20px;
        }

        .masking-sort-line {
          z-index: 2;
          width: 56px;
          height: 56px;
          background: linear-gradient(180deg, #f0f3f7, #ffffff);
          border: 2px solid #ffffff;
          border-radius: 50%;
          box-shadow: 0px 10px 20px -2px rgba(0, 0, 0, 0.08);
          display: flex;
          justify-content: center;
          align-items: center;

          .sort-li {
            width: 27px;
            height: 40px;
            font-size: 24px;
            font-family: San Francisco Display, San Francisco Display-Bold;
            font-weight: Bold;
            text-align: center;
            color: #0052d9;
            line-height: 40px;
            letter-spacing: 1.33px;
          }
        }
      }
    }
  }
}
</style>
